<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>登录</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .header {
            height: 230px;
            background: rgba(90, 194, 255, 1);
        }

        .bg {
            height: 230px;
            background: url("../../image/ui/bg_3.png");
            background-size: 100% 100%;
        }

        .close {
            width: 22px;
            height: 22px;
            margin: 33px 20px 0 0;
        }

        .h1 {
            font-size: 36px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-top: 25px;
            margin-left: 40px;
        }

        .h2 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-left: 40px;
        }

        .btn-h2 {
            width: 80px;
            height: 24px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 1);
            margin-left: 3px;
        }

        .container {
            z-index: 2;
            position: relative;
            margin-top: -55px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 22px 0px rgba(0, 161, 255, 0.28);
            border-radius: 20px 20px 0px 0px;
            padding: 35px 40px 30px 40px;
        }

        .row {
            height: 50px;
            background: rgba(245, 245, 245, 1);
            border-radius: 25px;
        }

        .icon {
            width: 18px;
            min-width: 18px;
            height: 18px;
            margin-left: 19px;
        }

        .area-number {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-left: 18px;
            white-space: nowrap;
        }

        input {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        input::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .eye {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .justify {
            margin-top: 20px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(90, 90, 90, 1);
        }

        .btn {
            margin: 20px auto 0 auto;
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            padding-top: 8px;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 25px;
        }

        .third-login-title {
            margin-top: 25px;
            position: relative;
            padding: 0 15px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            overflow: visible;
        }

        .third-login-title::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -20px;
            transform: translateY(-50%);
            width: 20px;
            height: 1px;
            transform: scaleY(0.5);
            background: #BFBFBF;
        }

        .third-login-title::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -20px;
            transform: translateY(-50%);
            width: 20px;
            height: 1px;
            transform: scaleY(0.5);
            background: #BFBFBF;
        }

        .third-login-item {
            margin-top: 16px;
            padding: 0 20px;
        }

        .third-login-icon {
            width: 30px;
            height: 30px;
            margin: 0 auto 5px auto;
        }

        .third-login-text {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
        }

        .checkbox {
            width: 16px;
            height: 16px;
            -webkit-appearance: none;
            background: url("../../image/ui/radio_2.png");
            background-size: 100% 100%;
            margin-right: 8px;
        }

        .checkbox:checked {
            background: url("../../image/ui/checked_2.png");
            background-size: 100% 100%;
        }

        .user-argeement {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            text-align: center;
            white-space: nowrap;
        }

        .user-argeement-highlight {
            color: rgba(90, 194, 255, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div id="login">
            <header class="header">
                <div class="bg">
                    <div data-flex="main:right">
                        <div class="close">
                            <img src="../../image/ui/close_2.png" alt="" tapmode onclick="fnBack()">
                        </div>
                    </div>
                    <div class="h1">登录</div>
                    <div class="h2" data-flex="cross:center">
                        <div>还没有账号吗?</div>
                        <div class="btn-h2" data-flex="main:center cross:center" tapmode
                            onclick="fnOpenloginPage('register')">点击注册</div>
                    </div>
                </div>
            </header>
            <div class="container">
                <div class="row" data-flex="cross:center" id="tel_login">
                    <div class="icon">
                        <img src="../../image/ui/phone.png" alt="">
                    </div>
                    <div class="area-number">
                        +86
                    </div>
                    <!-- <input style="text-indent: 8px;" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="telephone" maxlength="11"
                        data-type="_telphone" data-verify="true" data-null="true" data-regular="true" name="手机号"
                        placeholder="请输入电话号码"> -->
                    <input style="text-indent: 8px;" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="telephone" maxlength="11" name="手机号"
                        placeholder="请输入电话号码">
                </div>
                <div class="row" style="margin-top: 26px;" data-flex="cross:center">
                    <div class="icon">
                        <img src="../../image/ui/password.png" alt="">
                    </div>
                    <input style="text-indent: 18px;" data-flex-box="1" spellcheck="false"
                        :type="isPlaintext ? 'text' : 'password'" v-model="password" minlength="6" maxlength="16"
                        data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码"
                        placeholder="请输入密码">
                    <div class="eye" @click="isPlaintext = !isPlaintext">
                        <img :src="isPlaintext ? '../../image/ui/eye_open.png' :'../../image/ui/eye_close.png'" alt="">
                    </div>
                </div>
                <div class="justify" data-flex="main:justify cross:center">
                    <div tapmode onclick="fnOpenloginPage('quick_login')">短信快捷登录</div>
                    <div tapmode onclick="fnOpenloginPage('forget_password')">忘记密码</div>
                </div>
                <!-- @click="" -->
                <div class="btn" tapmode @click="isAvailable?handleLogin():openTips()">登录</div>
                <div v-if="isWxShow" data-flex="main:center cross:center">
                    <div class="third-login-title">第三方登录</div>
                </div>
                <div v-if="isWxShow" data-flex="main:center cross:center">
                    <div v-if="isAppleShow" onclick="fnModLogin('4')" class="third-login-item">
                        <div class="third-login-icon">
                            <img src="../../image/ui/iphone.png" alt="">
                        </div>
                        <div class="third-login-text">
                            Apple登录
                        </div>
                    </div>
                    <div v-if="isWxShow" class="third-login-item" tapmode onclick="fnModLogin('1')">
                        <div class="third-login-icon">
                            <img src="../../image/ui/wechat_2.png" alt="">
                        </div>
                        <div class="third-login-text">
                            微信登录
                        </div>
                    </div>
                </div>
                <div style="margin-top: 35px;" data-flex="main:center cross:center">
                    <input id="checkbox" class="checkbox" type="checkbox">
                    <div class="user-argeement">登录注册即同意<span class="user-argeement-highlight"
                            @click="openRichText('3','用户协议')">《用户协议》</span>
                        <span class="user-argeement-highlight" @click="openRichText('4', '隐私协议')">《隐私协议》</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        fnInit();
        setTimeout(function () {
            if (api.pageParam.closeWinName) {
                api.closeWin({
                    name: api.pageParam.closeWinName
                })
            }
        }, 200)
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                telephone: "",
                password: "",
                isAvailable: false, //登录按钮是否可用
                isPlaintext: false, //密码是否明文显示
                isAppleShow: false,
                isWxShow: false
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                telephone: function () {
                    fnLoginBtnStatus(this);
                },
                password: function () {
                    fnLoginBtnStatus(this);
                }
            },

            created() {
                // 读取上次登录成功的账号密码
                api.getPrefs({
                    key: 'loginPostData'
                }, function (ret) {
                    if (ret && ret.value) {
                        var postData = JSON.parse(ret.value)
                        vm.telephone = postData.account;
                        vm.password = postData.password;
                    }
                })
            },
        })
        fnLoginShow();
    }

    // 弹窗提示
    function openTips() {
        if (!vm.telephone) {
            fnToast('请输入手机号');
        } else if (!vm.password) {
            fnToast('请输入密码');
        }
    }

    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.telephone) && !isEmpty(vm.password)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }

    function fnLoginShow() {
        var wx_btn = WX();
        wx_btn.isInstalled(function (status) {
            if (status) {
                vm.isWxShow = true;
            }
        });
        var apple_btn = api.systemType;
        var version = api.systemVersion.split('.')[0];
        if (apple_btn == 'ios' && version >= 13) {
            vm.isAppleShow = true;
        }
    }

    function canLogin() {
        var check = document.getElementById('checkbox')
        if (check.checked) {
            return true;
        } else {
            fnToast('需先同意用户协议和隐私协议');
            return false;
        }
    }

    // 账号密码登录
    function handleLogin() {
        if (!canLogin()) return;
        if (fnVerify("login")) {
            $S.ShowProgress();
            var postData = {
                "account": vm.telephone,
                "password": vm.password
            };


            $S.POST("apiTbAppUser/passwordLogin", postData, function (ret, err) {
                if (ret && ret.status == "200") {

                    // 登录成功保存账号密码
                    api.setPrefs({
                        key: 'loginPostData',
                        value: JSON.stringify(postData)
                    })

                    fnToast("登录成功");
                    fnWhenLoginSucess(ret.data);
                    // 如果登录成功跳转到首页
                    api.closeToWin({
                        name: 'main'
                    })
                    api.sendEvent({
                        name: 'loginStatus',
                        extra: {
                            login: true,
                        }
                    })
                }
                $S.CloseProgress();
            })
        }
    }

    //第三方登录
    var _pData = {}; //用于提交个人信息的参数
    function fnModLogin(key) { //key 1:微信登录; 2:QQ登录; 3:微博登录 4：appleid 登录
        if (!canLogin()) return;
        fnLoginType(key, function (_param, ret1, err1) {
            // console.log(JSON.stringify(_param));
            // console.log(JSON.stringify(ret1))
            // console.log(JSON.stringify(ret1.info))
            // console.log(JSON.stringify(err1));
            if (key == "1") { //微信登录
                // alert(JSON.stringify(ret1))
                _pData.nickName = ret1.nickname;
                _pData.avatar = ret1.headimgurl;
            } else if (key == "2") { //qq登录
                _pData.nickName = JSON.parse(ret1.info).nickname;
                _pData.avatar = JSON.parse(ret1.info).figureurl_qq_1;
            } else if (key == "3") { //微博登录
                _pData.nickName = ret1.userInfo.screen_name || "";
                _pData.avatar = ret1.userInfo.profile_image_url || "";
            }
            console.log(JSON.stringify(_pData))
            //用于判断第三方是否绑定过手机号
            $S.ShowProgress();
            var postData = {
                "thirdType": '10' + key,
                "thirdPartyId": _param.openId,
                "mustBindPhone": '0'
            };
            if (key == 1) {
                postData.thirdType = '5';
            }
            $S.POST("apiTbAppUser/thirdPartyLogin", postData, function (ret, err) {
                if (ret && ret.status == "200") {
                    if (ret.data.notBindingThirdPartyUser == '1') {
                        console.log("未绑定过手机号");
                        //打开绑定手机号页面
                        fnToast("授权成功，需进行手机号绑定");
                        setTimeout(function () {
                            // 如果未绑定则跳转到绑定页面
                            var pageData = {
                                "thirdType": postData.thirdType,
                                "threeLoginId": postData.thirdPartyId,
                                "nickName": _pData.nickName,
                                "avatar": _pData.avatar
                            };
                            fnOpenloginPage('bind_phone', pageData)
                        }, "200")
                    } else if (ret.data.notBindingThirdPartyUser != "1") {
                        console.log("绑定过手机号");
                        fnToast("登录成功");
                        fnWhenLoginSucess(ret.data);
                        // 如果已绑定跳转到首页
                        openMainWin();
                        fnDelayCloseWin(300);
                        // 触发用户已登录事件
                        api.sendEvent({
                            name: 'loginStatus',
                            extra: {
                                login: true,
                            }
                        });
                    }
                }
                $S.CloseProgress();
            })
        })
    }

    function fnOpenloginPage(url, pageData) {
        // if (url != 'forget_password' && url != 'register' && !canLogin()) return;
        var param = {
            name: url,
            url: '../login/' + url + '.html',
            pageParam: pageData || {}
        }
        fnOpenWin(param)
    }
    // 返回上一页
    function fnBack() {
        fnDelayCloseWin()
    }

    // 打开富文本页面
    function openRichText(param, title) {
        fnOpenPublicWin(title, 'question/richText_frm', {
            textType: param
        });
    }
</script>

</html>